@page "/history"
@namespace SwashbucklerDiary.Rcl.Pages
@inherits DiariesPageComponentBase

<MyAppBar>
    @if (normalCalendarVisible)
    {
        <MToolbarTitle Class="font-weight-bold flex-grow-1">
            <wc-auto-scroll-text>@(I18n.T("Calendar"))</wc-auto-scroll-text>
        </MToolbarTitle>
    }
    else
    {
        <div class="float-calendar" style="cursor:pointer;" @onclick="()=>showFloatCalendar=true">
            <MTextField Value="SelectedDate"
                        Class="rounded-lg text-h6 font-weight-bold"
                        Dense="true"
                        Readonly="true"
                        Solo="true"
                        Flat="true"
                        BackgroundColor="transparent"
                        HideDetails="@("auto")"
                        PrependIcon="calendar_month">
            </MTextField>
        </div>

        <MSpacer></MSpacer>
    }

    <MButton Icon="true"
             OnClick="ResetDatePicker">
        <MIcon>event_repeat</MIcon>
    </MButton>

    <MultiSizeMenu @bind-Visible="showMenu"
               DynamicListItems="menuItems">
        <ActivatorContent>
            <MButton @attributes="@context.Attrs"
                     Icon="true">
                <MultiSizeDisplay>
                    <DesktopContent>
                        <MIcon>more_horiz</MIcon>
                    </DesktopContent>
                    <MobileContent>
                        <MIcon>more_vert</MIcon>
                    </MobileContent>
                </MultiSizeDisplay>
            </MButton>
        </ActivatorContent>
    </MultiSizeMenu>
</MyAppBar>

<ScrollContainer Id="@scrollContainerId">
    <IntersectElement IntersectChanged="HandleIntersectChanged">
        <MDatePicker @key="datePickerKey"
                     @bind-Value="SelectedDate"
                     Class="rounded-lg my-picker mb-5 pt-4"
                     TValue="DateOnly"
                     FullWidth="true"
                     NoTitle="true"
                     Color="primary"
                     Events="eventsDates"
                     EventColor='"primary"'
                     FirstDayOfWeek="firstDayOfWeek"
                     Locale="@(I18n.Culture.Name)">
        </MDatePicker>
    </IntersectElement>

    <DiaryCardList @bind-Value="SelectedDiaries"
                   @bind-Tags="Tags">
    </DiaryCardList>
</ScrollContainer>

<div class="right-bottom-float-area">
    <BackTopButton Selector="@scrollContainerSelector">
    </BackTopButton>

    <MyFloatButton Icon="mdi:mdi-pencil"
                   OnClick="ToWrite">
    </MyFloatButton>
</div>

<DatePickerDialog @bind-Value="SelectedDate"
                  @bind-Visible="showFloatCalendar"
                  Events="eventsDates"
                  EventColor='"primary"'>
</DatePickerDialog>

<ExportByTimeDialog @bind-Visible="showExportThisTime"
                    Value="SelectedDate">
</ExportByTimeDialog>

<CustomMDialog @bind-MyValue="showConfirmMerge"
                  ContentClass="rounded-lg"
                  MaxWidth="420">
    <MCard>
        <MCardTitle Class="font-weight-bold flex-nowrap">
            <wc-auto-scroll-text>@(I18n.T("Merge diaries"))</wc-auto-scroll-text>
            <MSpacer></MSpacer>
            <MButton Icon="true"
                     OnClick="@(()=>showConfirmMerge=false)">
                <MIcon>close</MIcon>
            </MButton>
        </MCardTitle>
        <MCardText Class="pb-0">
            @(I18n.T("Are you sure to merge the selected date diary contents? (Other information of the diary, such as title, weather, etc., will be dominated by the first entry.)"))
        </MCardText>
        <MCardActions>
            <MSpacer></MSpacer>
            <MButton Text
                     OnClick="()=>showConfirmMerge=false">
                @(I18n.T("Cancel"))
            </MButton>
            <MButton Text
                     Color="primary"
                     OnClick="ConfirmMerge">
                @(I18n.T("OK"))
            </MButton>
        </MCardActions>
    </MCard>
</CustomMDialog>
